<template>
  <div class="projectLeft-container">
      <div class="menuBox">
        <el-card class="proMunList">
            <h3>项目管理</h3>
            <el-row>
                <el-col :span="18">
                     <el-input
                    class="searchIpt"
                    placeholder="请输入搜索内容"
                    prefix-icon="el-icon-search"
                    v-model="searchKeyWord">
                    </el-input>
                </el-col>
                <el-col :span="6"><el-button type="warning" icon="el-icon-search" @click="searchPro">搜索</el-button></el-col>
            </el-row>

            <div class="Company" v-if="isShowCompany">
                <div class="companyPro">
                    <h4>公司项目</h4>  
                    <el-button type="primary" size="mini" @click="creatProShow=true">新建</el-button>
                </div>
                <el-row class="proListname" v-for="item in CompanyProList" :key="item.id">
                    <div class="proListname_left">{{item.status | proStatus}}</div>
                    <div class="proListname_right">
                        <p>{{item.proName}}</p>
                        <p>{{item.proUserName}}</p>
                    </div>
                </el-row>
            </div>

            <div class="MineJoin">
                <div class="myJointest">
                    <h4>我参与的项目</h4>  
                    <span class="joinIcon" @click="projectList">
                        <i class="el-icon-caret-right iconItem" v-show="!isShowIcon"></i>
                        <i class="el-icon-caret-bottom iconItem" v-show="isShowIcon"></i>   
                    </span>
                </div>
                <el-row class="proListname" v-show="isShowIcon" v-for="item in myJoinProList" :key="item.id">
                    <div class="proListname_left">{{item.status | proStatus}}</div>
                    <div class="proListname_right">
                        <p>{{item.proName}}</p>
                        <p>{{item.proUserName}}</p>
                    </div>
                </el-row>
            </div>
            <!-- ====================== -->
            <div class="MineJoin">
                <div class="myJointest">
                    <h4>{{otherProtitle}}</h4>  
                    <span class="joinIcon" @click="projectOtherList">
                        <i class="el-icon-caret-right iconItem" v-show="!isShowIconOther"></i>
                        <i class="el-icon-caret-bottom iconItem" v-show="isShowIconOther"></i>   
                    </span>
                </div>
                <el-row class="proListname" v-show="isShowIconOther" v-for="item in otherProList" :key="item.id">
                    <div class="proListname_left">{{item.status | proStatus}}</div>
                    <div class="proListname_right">
                        <p>{{item.proName}}</p>
                        <p>{{item.proUserName}}</p>
                    </div>
                </el-row>
            </div>
            

        </el-card>
      </div>

    <el-dialog
      title="新建项目"
      :visible.sync="creatProShow"
      width="25%"
      :close-on-click-modal="false"
    >
    <div>
        <el-row :gutter="30" justify='space-between'>
            <el-col :span="24">
                <div class="sub-title">项目名称</div>
                <el-input
                    placeholder="请输入项目名称"
                    v-model="creatPromsg.type">
                </el-input>
            </el-col>
        </el-row>

        <el-row :gutter="30" justify='space-between'>
            <el-col :span="12">
                <div class="sub-title">项目经理</div>
                <el-input
                    placeholder="项目经理"
                    v-model="creatPromsg.manager">
                </el-input>
            </el-col>
            <el-col :span="12">
                <div class="sub-title">项目开始时间</div>
                <el-input
                    placeholder="请输入项目名称"
                    v-model="creatPromsg.proStarTime">
                </el-input>
            </el-col>
        </el-row>

        <el-row :gutter="30" justify='space-between'>
            <el-col :span="12">
                <div class="sub-title">项目预计结束时间</div>
                <el-input
                    placeholder="结束时间"
                    v-model="creatPromsg.expectEndTime">
                </el-input>
            </el-col>
            <el-col :span="12">
                <div class="sub-title">项目预计所用时长 (小时)</div>
                <el-input
                    placeholder="所用时长"
                    v-model="creatPromsg.proStarTime">
                </el-input>
            </el-col>
        </el-row>
        <el-row :gutter="30" justify='space-between'>
            <el-col :span="8">
                <div class="sub-title">项目人员</div>
               <el-select v-model="creatPromsg.proMember" placeholder="任务名称" @change="addMember">
                    <el-option
                    v-for="item in aboutproson"
                    :key="item.value"
                    :label="item.label"
                    :value="item"
                    >
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="16">
                <div class="sub-title"></div>
                <el-tag
                    style="margin:4px;"
                    v-for="tag in tags"
                    :key="tag.value"
                    closable
                    @close="delTag(tag)"
                    type="success">
                    {{tag.label}}
                </el-tag>
            </el-col>
        </el-row>
        <el-row :gutter="30" justify='space-between'>
            <el-col :span="24">
                <div class="sub-title">项目描述</div>
                <el-input
                    placeholder="请输入项目描述"
                    v-model="creatPromsg.describe">
                </el-input>
            </el-col>
        </el-row>
    </div>
      
      
      <span slot="footer" class="dialog-footer">
        <!-- <div class="footerDate">123</div> -->
        <el-button  @click="creatProShow = false">关闭</el-button>
        <el-button type="primary" @click="submitNewPro">提 交</el-button>
      </span>
    </el-dialog>



  </div>
</template>

<script>

export default {
  name: 'projectLeft',
  components: {
    
  },
  props: {
    myJoinProList: {
      type: Array,
      default() {
        return [
          
        ]
      } 
    },
    isShowCompany: {
        type: Boolean,
        default: true
    },
    CompanyProList: {
        type: Array,
        default() {
            return [
               
            ]
        } 
    },
    otherProtitle: {
        type: String,
        default: '其他任务'
    },
    otherProList: {
        type: Array,
        default() {
            return [
               
            ]
        } 
    }
  },
  data() {
    return {
      searchKeyWord: '',
      isShowIcon: false,
      isShowIconOther: false,
      creatProShow: false,
      creatPromsg: {},
      aboutproson: [
        {value: 1, label: '张三'},{value: 2, label: '李四'},{value: 3, label: '王五'}
      ],
      tags: [
        { label: '小明', value: 10},
        { label: '小红', value: 20},
      ]
    }
  },
  mounted() {
    
  },
  filters: {
      proStatus (state) {
          switch (state) {
              case '0':
                return '进行中'
              case '1':
                return ''
              default:
                return ''
          }
      }
  },
  methods: {
      searchPro () {
          console.log(this.searchKeyWord)
          this.$emit('searchProject', this.searchKeyWord)
      },
      projectList () {
          this.isShowIcon = !this.isShowIcon
          if (this.isShowIcon === true) {
            console.log(123)
          }
      },
      //其他任务
      projectOtherList () {
          this.isShowIconOther = !this.isShowIconOther
          if (this.isShowIconOther === true) {
            console.log(456)
          }
      },
      addMember (e) {
          let istag = true;
        this.tags.forEach(item => {
          if (item.value == e.value) {
             istag = false
             return   
          }
        })
        if (istag) {
          this.tags.push(e)
        } else {
          this.$message('成员已存在');
        }
      },
       //项目人员删除
      delTag (tag) {
        this.tags.forEach(item => {
          if (item.value == tag.value) {
              const idx = this.tags.indexOf(tag)
              this.tags.splice(idx,1)
          }
        })
      },

      // 提交新建项目
      submitNewPro () {
          console.log(this.creatPromsg, this.tags)
      }
  },
}
</script>
<style scoped lang="scss">
    .proMunList{
        
        .searchIpt{
            width: 80%;
            margin: 0 auto;
        }
        
        .companyPro{
            display: flex;
            align-items: center;
            justify-content: space-between;
            // margin-top: 20px;
        }


        .myJointest{
            display: flex;
            align-items: center;
            margin-top: 20px;
            .joinIcon{
                width: 18px;
                height: 18px;
                line-height: 18px;
                border-radius: 50%;
                background-color: #dee1eb;
                margin-left: 200px;
                text-align: center;
                cursor: pointer;
            }
            .iconItem{
                font-size: 13px;
            }
        }

        .proListname{
            width: 95%;
            height: 60px;
            display: flex;
            margin: 0 auto;
            background-color: #f1f4ff;
            border-radius: 5px;
            cursor: pointer;
            margin-bottom: 10px;
            .proListname_left{
                min-width: 2%;
                height: 100%;
                border-radius: 5px;
                background-color: rgb(10, 255, 63);
                color: #ffff;
                font-size: 13px;
                line-height: 17px;
                text-align: center;
                padding-top: 5px;
                letter-spacing: 5px;
                writing-mode:vertical-lr;
            }
            .proListname_right{
                line-height: 8px;
                margin-left: 10px;
                p:nth-child(2){
                    font-size: 12px;
                    color: rgba(128, 128, 128, 0.8);
                }
            }
        }
    }
    .sub-title{
        font-weight: 800;
        padding: 10px 0;
    }
</style>